<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#outer{
				width:350px;
				margin: 5px auto;
				padding: 10px;
				background-color: greenyellow;
				text-align: center;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				/*获取对象*/
				var prev=document.getElementById("prev");
				var next=document.getElementById("next");
				var img=document.getElementsByTagName("img")[0];
				var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg",]
				var index=0;
				var info=document.getElementById("info");
				info.innerHTML="一共"+imgArr.length+"张图片，当前是第"+(index+1)+"张图片";
				/*修改内容*/
				prev.onclick=function(){
					index--;
					if(index<0){
						index=imgArr.length-1;
					}
					img.src=imgArr[index];
					info.innerHTML="一共"+imgArr.length+"张图片，当前是第"+(index+1)+"张图片";
				}
				next.onclick=function(){
					index++;
					if(index>imgArr.length-1){
						index=0;
					}
					img.src=imgArr[index];
					info.innerHTML="一共"+imgArr.length+"张图片，当前是第"+(index+1)+"张图片";
				}
			}
		</script>
	</head>
	<body>
		<div id="outer">
			<p id=info></p>
			<img src="img/1.jpg"  alt="奋斗"/>
			<br />
			<button id="prev">上一张</button>
			<button id="next">下一张</button>
		</div>
	</body>
</html>
